<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: hidden;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }
        #box img {
            font-size: 0;
        }

    </style>
</head>
<body>
<div id="box">
  <div style="width: 500%">
      <div id="content" style="margin-left:0px; float: left">
          <img src="image/1.jpg" height="220">
          <img src="image/2.png" height="220">
          <img src="image/3.jpg" height="220">
          <img src="image/4.jpg" height="220">
          <img src="image/5.jpg" height="220">
      </div>
      <div style="margin-left:0px;float: left">
          <img src="image/1.jpg" height="220">
          <img src="image/2.png" height="220">
          <img src="image/3.jpg" height="220">
          <img src="image/4.jpg" height="220">
          <img src="image/5.jpg" height="220">
      </div>

  </div>


</div>

<script>
    var box = document.getElementById('box');
    var content = document.getElementById('content');
    var cOffsetWidth = content.scrollWidth;//内层 content容器的宽度
    function move(){
        var offfsetLeft = Math.abs(content.offsetLeft);//距离外层元素的位置在改变，数值是负的，改成正的。
        console.log(offfsetLeft)
        if (offfsetLeft>=cOffsetWidth){
            content.style.marginLeft = 0;
//            clearInterval(t);
        } else {
            content.style.marginLeft = parseInt(content.style.marginLeft)+(-5)+'px'
        }

    }
    //鼠标放到元素上就会触发
    box.onmouseover = function(){
        clearInterval(t);
    }
    //鼠标移出元素上就会触发
    box.onmouseout = function(){
        t = setInterval(move,20)
    }

    var t = setInterval(move,20)

</script>
</body>
</html>